//antd mobile 菜单组件

import React from "react";
import { Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import './list.css'
var data = [
]
var newData =[]
var children = []

class MenuExample extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {
            initData: '',
            show: false,
        };
    }
    componentDidMount() {
        //此时data还为[]
        this.props.list()       
    }
    onChange = (value) => {
        let label = '';
        data.forEach((dataItem) => {
            if (dataItem.value === value[0]) {
                label = dataItem.label;
                if (dataItem.children && value[1]) {
                    dataItem.children.forEach((cItem) => {
                        if (cItem.value === value[1]) {
                            label += ` ${cItem.label}`;
                        }
                    });
                }
            }
        });
        console.log(label);
    }

    handleClick = (e) => {
        e.preventDefault(); // Fix event propagation on Android
        this.setState({
            show: !this.state.show,
        });
        // mock for async data loading
        if (!this.state.initData) {
            setTimeout(() => {
                this.setState({
                    initData: data,
                });
            }, 500);
        }

    }

    onMaskClick = () => {
        this.setState({
            show: false,
        });
    }

    render() {
if(data.length==0){
    console.log(data)
    if(this.props.data[0]){
      var a = this.props.data[0][1].filter(item=>item.category==0)
      var b = this.props.data[0][1].filter(item=>item.category==1)
      var c = this.props.data[0][1].filter(item=>item.category==2)
      var d = this.props.data[0][1].filter(item=>item.category==3)
      var e = this.props.data[0][1].filter(item=>item.category==4)
      console.log(a,b,c,d,this.props.data[0][0].length)
      var childrenOne = []
      a.map((item,i)=>{
          childrenOne.push({
              label: item.name,
              value: i,
          })
      })
      var childrenTWo= []
      b.map((item,i)=>{
          childrenTWo.push({
              label: item.name,
              value: i,
          })
      })
      var childrenThree = []
      c.map((item,i)=>{
          childrenThree.push({
              label: item.name,
              value: i,
          })
      })
      var childrenFour = []
      d.map((item,i)=>{
          childrenFour.push({
              label: item.name,
              value: i,
          })
      })
      var childrenFive = []
     e.map((item,i)=>{
        childrenFive.push({
              label: item.name,
              value: i,
          })
      })
         
  children=[childrenOne,childrenTWo,childrenThree,childrenFour,childrenFive]
      for(let i=0;i<5;i++){
          newData.push({
              value: i,
              label: this.props.data[0][0][i],
              children:children[i]
              
          })
      
      }
      console.log(newData)
      data =newData
      console.log(data)
    }
}
      console.log(this.state)
        const { initData, show } = this.state;
        const menuEl = (
            <Menu
                className="foo-menu"
                data={initData}
                value={['1', '3']}
                onChange={this.onChange}
                height={document.documentElement.clientHeight * 0.6}
            />
        );
        const loadingEl = (
            <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
                <ActivityIndicator size="large" />
            </div>
        );
        return (
            <div className={show ? 'menu-active' : ''}>
                <div>
                    <NavBar
                        leftContent="分类"
                        mode="light"
                        icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" className="am-icon am-icon-md" alt="" />}
                        onLeftClick={this.handleClick}
                        className="top-nav-bar"
                    >
                        Here is title
          </NavBar>
                </div>
                {show ? initData ? menuEl : loadingEl : null}
                {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
            </div>
        );
    }
}
export default MenuExample